import {
  drawer_disable_ok_button,
  drawerInstance,
  operateType,
  refreshComponent,
  userDetailLoading,
  tableActiveKey,
  modalTitle,
  isChecked,
  drawerInputValidators,
  drawerFormState,
  defaultVisible,
  defaultModalFormState,
} from "./store";
import { handleSubmit } from "./utils";
import styles from "./index.module.less";
import UserDetail from "@user/pay/userDetail";
export const drawerVisible = ref(false);
export const drawerTitle = ref("");
export const drawerLoading = ref(false);
export const drawerConfig = () => {
  const recharge_help = ref<any>(null);
  const helpRef = ref<any>(null);
  const defineDrawer = {
    width: "800px",
    drawerInstance,
    loading: drawerLoading,
    visible: drawerVisible,
    title: drawerTitle,
    maskClosable: true,

    formState: drawerFormState,
    slot: {
      extra_form_item: () => {
        return (
          <div class={styles.drawer_container}>
            {tableActiveKey.value === 0 ? (
              <>
                <a-row class="s-drawer-extra-row">
                  <s-title>{$t("base.orderDetail")}</s-title>
                </a-row>
                <a-row class="s-drawer-extra-row">
                  <div class={styles.row}>
                    <div class={styles.col}>
                      <td>{$t("table126")}：</td>
                      <td>{drawerFormState.order_number}</td>
                    </div>
                    <div class={styles.col}>
                      <td>{$t("table133")}：</td>
                      <td>{drawerFormState.origin_type}</td>
                    </div>
                    <div class={styles.col}>
                      <td>{$t("table134")}：</td>
                      <td>{drawerFormState.order_status}</td>
                    </div>
                  </div>
                </a-row>
                <a-row class="s-drawer-extra-row">
                  <div class={styles.row}>
                    <div class={styles.col}>
                      <td>{$t("table135")}：</td>
                      <td>{getTimeByZone(drawerFormState.create_time)}</td>
                    </div>
                    <div class={styles.col} style="flex: 2">
                      <td style="flex: calc(1/6)">{$t("table178")}：</td>
                      <td style="flex: calc(2/6)">
                        {getTimeByZone(drawerFormState.pay_time)}
                      </td>
                    </div>
                  </div>
                </a-row>
                <a-row class="s-drawer-extra-row">
                  <s-title>{$t("base.payInfo")}</s-title>
                </a-row>
                <a-row class="s-drawer-extra-row">
                  <div class={styles.row}>
                    <div class={styles.col}>
                      <td style="flex: 1">{$t("table172")}：</td>
                      <td style="flex: 1">
                        {drawerFormState.third_order_number}
                      </td>
                    </div>
                    <div class={styles.col}>
                      <td style="flex: 1">{$t("table137")}：</td>
                      <td style="flex: 1">{drawerFormState.pay_type}</td>
                    </div>
                    <div class={styles.col}>
                      <td style="flex: 1">{$t("table177")}：</td>
                      <td style="flex: 1">{drawerFormState.pay_platform}</td>
                    </div>
                  </div>
                </a-row>
                <a-row class="s-drawer-extra-row">
                  <div class={styles.row}>
                    <div class={styles.col}>
                      <td style="flex: 1">{$t("recharge35")}：</td>
                      <td style="flex: 1">{drawerFormState.amount}</td>
                    </div>
                    <div class={styles.col} style="flex: 2">
                      <td style="flex: calc(1/4)">{$t("recharge36")}：</td>
                      <td style="flex: calc(1/4)">
                        {drawerFormState.actual_amount}
                      </td>
                    </div>
                  </div>
                </a-row>
                <a-row class="s-drawer-extra-row">
                  <s-title>{$t("base.buyerInfo")}</s-title>
                </a-row>
                <a-row class="s-drawer-extra-row">
                  <div class={styles.row}>
                    <div class={styles.col} style="flex: 1;">
                      <td>{$t("table0")}：</td>
                      <td>
                        {refreshComponent.value ? (
                          <a-spin spinning={userDetailLoading}>
                            {renderUserInfo({
                              record: drawerFormState?.user_info,
                              tableLoading: userDetailLoading,
                            })}
                          </a-spin>
                        ) : null}
                      </td>
                    </div>
                    <div class={styles.col} style="flex: 2">
                      <td style="flex: calc(1/6)">{$t("recharge37")}：</td>
                      <td style="flex: calc(2/6)">
                        {drawerFormState.phone_number}
                      </td>
                    </div>
                  </div>
                </a-row>
              </>
            ) : (
              <>
                <tips-card
                  parentClass={styles.drawer_container}
                  title={getProxyT("recharge73")}
                  content={getProxyT("recharge38")}
                />
                <a-row class="s-drawer-extra-row">
                  <s-title>{$t("base.baseSet")}</s-title>
                </a-row>

                <a-row class="s-drawer-extra-row">
                  <a-col span={24}>
                    <a-form-item
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 8 }}
                      label={$t("table186")}
                      name="name"
                      rules={[
                        {
                          required: true,
                          trigger: ["change", "blur"],
                          validator: (rule: any, value: any) => {
                            if (
                              !(
                                /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value) &&
                                value?.length >= 4 &&
                                value?.length <= 12
                              )
                            ) {
                              drawerInputValidators[0] = true;
                              return Promise.reject(
                                $t("placeholder87") +
                                  4 +
                                  $t("base.to") +
                                  12 +
                                  $t("base.digit")
                              );
                            }
                            drawerInputValidators[0] = false;
                            return Promise.resolve();
                          },
                        },
                      ]}
                    >
                      <a-input
                        maxlength={12}
                        allowClear
                        vModel:value={drawerFormState.name}
                        placeholder={
                          $t("placeholder81") + "4-12" + $t("placeholder85")
                        }
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row class="s-drawer-extra-row">
                  <a-col span={24}>
                    <a-form-item
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 12 }}
                      label={$t("table187")}
                      name={
                        drawerFormState.is_wallet_amount_limit === 0
                          ? "is_wallet_amount_limit"
                          : "wallet_amount_limit"
                      }
                      rules={[
                        {
                          required: true,
                          trigger: ["blur", "change"],
                          validator: (rule: any, value: string) => {
                            if (isEmptyType(value)) {
                              helpRef.value = (
                                <i class="fs10">{$t("placeholder88")}</i>
                              );
                              drawerInputValidators[1] = true;
                              return Promise.reject();
                            }

                            if (+value > 9999999) {
                              helpRef.value = (
                                <i class="fs10">
                                  {"0-9999999" + $t("placeholder80")}
                                </i>
                              );
                              return Promise.reject();
                            }

                            helpRef.value = null;
                            drawerInputValidators[1] = false;
                            return Promise.resolve();
                          },
                        },
                      ]}
                      help={helpRef.value}
                    >
                      <div style="display: flex;align-items: center;">
                        <a-form-item-rest>
                          <a-radio-group
                            onChange={({ target: { value } }: any) => {
                              if (value === 0) {
                                drawerInputValidators[2] = false;
                                helpRef.value = null;
                                drawerFormState.wallet_amount_limit = undefined;
                                if (isStartDev.value)
                                  return drawerInstance.value.ctx.refs?.formValidate?.clearValidate(
                                    "wallet_amount_limit"
                                  );
                                drawerInstance.value.proxy.refs?.formValidate?.clearValidate(
                                  "wallet_amount_limit"
                                );
                              }
                              if (value === 1)
                                drawerFormState.wallet_amount_limit = undefined;
                            }}
                            vModel:value={
                              drawerFormState.is_wallet_amount_limit
                            }
                          >
                            <a-radio value={0}>{$t("recharge21")}</a-radio>
                            <a-radio value={1}>{$t("recharge22")}</a-radio>
                          </a-radio-group>
                        </a-form-item-rest>
                        {drawerFormState.is_wallet_amount_limit === 1 ? (
                          <a-input
                            min={1}
                            max={9999999}
                            allowClear
                            placeholder={$t("placeholder81")}
                            style="width: 180px"
                            vModel:value={drawerFormState.wallet_amount_limit}
                            addon-after={$t("base.usdt")}
                            onInput={({ target: { value } }: any) => {
                              value = value?.replace?.(/^(0+)|[^\d]+/g, "");
                              drawerFormState.wallet_amount_limit =
                                +value > 9999999 ? 9999999 : value;
                            }}
                            onBlur={() => {
                              drawerFormState.wallet_amount_limit =
                                +drawerFormState.wallet_amount_limit > 9999999
                                  ? 9999999
                                  : drawerFormState.wallet_amount_limit;
                            }}
                          />
                        ) : null}
                      </div>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row class="s-drawer-extra-row">
                  <s-title>{$t("base.rechargeSet")}</s-title>
                </a-row>
                <a-row class="s-drawer-extra-row">
                  <a-col span={24}>
                    <a-form-item
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 12 }}
                      label={$t("table175")}
                      name="amount_list"
                      rules={[
                        {
                          required: true,
                          trigger: ["change", "blur"],
                          message: $t("placeholder90"),
                        },
                      ]}
                    >
                      <div class={styles.tags_flex}>
                        {refreshComponent.value ? (
                          <div class={styles.tag_list}>
                            {drawerFormState.amount_list?.map((item: any) => (
                              <a-tag
                                color="#a1a1a1"
                                closable
                                onClose={(event: any) => {
                                  const index =
                                    drawerFormState.amount_list.indexOf(item);
                                  if (index >= 0) {
                                    drawerFormState.amount_list.splice(
                                      index,
                                      1
                                    );
                                  }
                                  refreshComponent.value = false;
                                  nextTick(() => {
                                    refreshComponent.value = true;
                                  });
                                }}
                              >
                                {{
                                  icon: renderIcon(
                                    "icon-meiyuan" + " " + styles.s_icon
                                  ),
                                  default: <i>{item}</i>,
                                }}
                              </a-tag>
                            ))}
                          </div>
                        ) : null}

                        <div class={styles.add_tag}>
                          <div
                            class={[
                              styles.add_button,
                              drawerFormState.amount_list?.length >= 9
                                ? "cursor-not-allowed"
                                : "cursor-pointer",
                            ]}
                          >
                            <a
                              onClick={() => {
                                defaultVisible[tableActiveKey.value].value =
                                  true;
                                defaultModalFormState[
                                  tableActiveKey.value
                                ].temValue = undefined;
                                modalTitle.value = $t("recharge52");
                              }}
                              class={
                                drawerFormState.amount_list?.length >= 9
                                  ? "pointer-events-none"
                                  : "pointer-events-auto"
                              }
                            >
                              {$t("recharge52")}
                            </a>
                          </div>
                          <div class={styles.tips}>
                            <i>{$t("recharge53")}</i>
                          </div>
                        </div>
                      </div>
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row class="s-drawer-extra-row">
                  <a-col span={24}>
                    <a-form-item
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 12 }}
                      label={$t("table188")}
                      name={
                        drawerFormState.is_recharge_amount_limit === 0
                          ? "is_recharge_amount_limit"
                          : "max_recharge_amount"
                      }
                      help={recharge_help.value}
                      validateStatus="error"
                      rules={[
                        {
                          required: true,
                          trigger: ["blur", "change"],
                        },
                      ]}
                    >
                      <div style="display: flex;align-items: center;white-space: nowrap;">
                        <a-form-item-rest>
                          <a-radio-group
                            onChange={({ target: { value } }: any) => {
                              if (value === 0) {
                                drawerInputValidators[3] = false;
                                drawerInputValidators[4] = false;
                                recharge_help.value = null;
                                drawerFormState.min_recharge_amount = undefined;
                                drawerFormState.max_recharge_amount = undefined;
                              }
                              if (value === 1) {
                                drawerFormState.min_recharge_amount = undefined;
                                drawerFormState.max_recharge_amount = undefined;
                              }
                            }}
                            vModel:value={
                              drawerFormState.is_recharge_amount_limit
                            }
                          >
                            <a-radio value={0}>{$t("recharge21")}</a-radio>
                            <a-radio value={1}>{$t("recharge50")}</a-radio>
                          </a-radio-group>
                        </a-form-item-rest>
                      </div>
                    </a-form-item>
                  </a-col>
                </a-row>
                {drawerFormState.is_recharge_amount_limit === 1 ? (
                  <a-row class="s-drawer-extra-row mb8">
                    <a-col span={20} offset={4}>
                      <div class={styles.Flex}>
                        <a-checkbox
                          vModel:checked={isChecked[0]}
                          onChange={({ target: { checked } }) => {
                            if (checked === false) {
                              drawerInputValidators[3] = isEmptyType(
                                drawerFormState.max_recharge_amount
                              );
                              drawerFormState.min_recharge_amount = undefined;
                            }
                          }}
                        >
                          {$t("recharge54")}
                        </a-checkbox>
                        {isChecked[0] ? (
                          <>
                            <div class={styles.Input}>
                              <a-input
                                allowClear
                                placeholder={$t("placeholder81")}
                                style="width: 150px"
                                vModel:value={
                                  drawerFormState.min_recharge_amount
                                }
                                addon-after={$t("base.usdt")}
                                onkeyup="value=value?.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                                onInput={({ target: { value } }: any) => {
                                  if (!value) {
                                    if (
                                      isEmptyType(
                                        drawerFormState.max_recharge_amount
                                      )
                                    ) {
                                      drawerInputValidators[3] = true;
                                      recharge_help.value = (
                                        <i class="fs10">
                                          {$t("placeholder89")}
                                        </i>
                                      );
                                      return;
                                    }
                                  }

                                  if (
                                    !isEmptyType(value) &&
                                    +value <
                                      Math.min(...drawerFormState.amount_list)
                                  ) {
                                    drawerInputValidators[3] = true;
                                    recharge_help.value = (
                                      <i class="fs10">{$t("recharge46")}</i>
                                    );
                                    return;
                                  }

                                  if (
                                    !isEmptyType(
                                      drawerFormState.max_recharge_amount
                                    ) &&
                                    !isEmptyType(value) &&
                                    +value >
                                      +drawerFormState.max_recharge_amount
                                  ) {
                                    drawerInputValidators[3] = true;
                                    recharge_help.value = (
                                      <i class="fs10">{$t("recharge48")}</i>
                                    );
                                    return;
                                  }

                                  drawerInputValidators[3] = false;
                                  drawerInputValidators[4] = false;
                                  recharge_help.value = null;
                                }}
                              />
                              <i>{$t("recharge46")}</i>
                            </div>
                          </>
                        ) : null}
                      </div>
                    </a-col>
                  </a-row>
                ) : null}
                {drawerFormState.is_recharge_amount_limit === 1 ? (
                  <a-row class="s-drawer-extra-row">
                    <a-col span={20} offset={4}>
                      <div class={styles.Flex}>
                        <a-checkbox
                          vModel:checked={isChecked[1]}
                          onChange={({ target: { checked } }) => {
                            if (checked === false) {
                              drawerInputValidators[4] = isEmptyType(
                                drawerFormState.min_recharge_amount
                              );
                              drawerFormState.max_recharge_amount = undefined;
                            }
                          }}
                        >
                          {$t("recharge55")}
                        </a-checkbox>
                        {isChecked[1] ? (
                          <>
                            <div class={styles.Input}>
                              <a-input
                                allowClear
                                placeholder={$t("placeholder81")}
                                style="width: 150px"
                                vModel:value={
                                  drawerFormState.max_recharge_amount
                                }
                                addon-after={$t("base.usdt")}
                                onkeyup="value=value?.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                                onInput={({ target: { value } }: any) => {
                                  if (!value) {
                                    if (
                                      isEmptyType(
                                        drawerFormState.min_recharge_amount
                                      )
                                    ) {
                                      drawerInputValidators[4] = true;
                                      recharge_help.value = (
                                        <i class="fs10">
                                          {$t("placeholder89")}
                                        </i>
                                      );
                                      return;
                                    }
                                  }

                                  if (
                                    !isEmptyType(
                                      drawerFormState.min_recharge_amount
                                    ) &&
                                    +drawerFormState.min_recharge_amount <
                                      Math.min(...drawerFormState.amount_list)
                                  ) {
                                    drawerInputValidators[3] = true;
                                    recharge_help.value = (
                                      <i class="fs10">{$t("recharge46")}</i>
                                    );
                                    return;
                                  }

                                  if (
                                    !isEmptyType(
                                      drawerFormState.min_recharge_amount
                                    ) &&
                                    !isEmptyType(value) &&
                                    +value <
                                      +drawerFormState.min_recharge_amount
                                  ) {
                                    drawerInputValidators[4] = true;
                                    recharge_help.value = (
                                      <i class="fs10">{$t("recharge49")}</i>
                                    );
                                    return;
                                  }

                                  if (
                                    !isEmptyType(value) &&
                                    +value <
                                      Math.min(...drawerFormState.amount_list)
                                  ) {
                                    drawerInputValidators[4] = true;
                                    recharge_help.value = (
                                      <i class="fs10">{$t("recharge72")}</i>
                                    );
                                    return;
                                  }

                                  if (
                                    !isEmptyType(value) &&
                                    +value >
                                      Math.max(...drawerFormState.amount_list)
                                  ) {
                                    drawerInputValidators[4] = true;
                                    recharge_help.value = (
                                      <i class="fs10">{$t("recharge47")}</i>
                                    );
                                    return;
                                  }
                                  drawerInputValidators[3] = false;
                                  drawerInputValidators[4] = false;
                                  recharge_help.value = null;
                                }}
                              />
                              <i>{$t("recharge47")}</i>
                            </div>
                          </>
                        ) : null}
                      </div>
                    </a-col>
                  </a-row>
                ) : null}

                <a-row class="s-drawer-extra-row">
                  <s-title>{$t("base.otherSet")}</s-title>
                </a-row>

                <a-row class="s-drawer-extra-row">
                  <a-col span={24}>
                    <a-form-item
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 12 }}
                      label={$t("table185")}
                      name="comment"
                    >
                      {withDirectiveInput({
                        vNode: (
                          <a-textarea
                            vModel:value={drawerFormState.comment}
                            rows="4"
                            show-count
                            maxlength="200"
                            placeholder={$t("placeholder86")}
                          />
                        ),
                      })}
                    </a-form-item>
                  </a-col>
                </a-row>
              </>
            )}
          </div>
        );
      },
      extra: () => {
        const { loading } = defineDrawer;
        return (
          <a-space size={8}>
            {operateType.value != "view" ? (
              <s-button
                icon={renderIcon("icon-cancel")}
                onClick={() => (defineDrawer.visible.value = false)}
              >
                {$t("base.cancel")}
              </s-button>
            ) : null}

            <s-button
              icon={renderIcon("icon-tubiao_tijiao")}
              loading={loading.value}
              disabled={
                (drawer_disable_ok_button?.value ?? drawer_disable_ok_button) ||
                drawerInputValidators.some((bool) => bool === true)
              }
              type="primary"
              onClick={async () => {
                let { loading, visible } = defineDrawer;
                handleSubmit({ loading, visible });
              }}
            >
              {operateType.value === "view" ? $t("base.ok") : $t("base.save")}
            </s-button>
          </a-space>
        );
      },
    },
  };
  return defineDrawer;
};
